<template>
  <div id="">
    <headerbox :headerTitle="'钱包充值'" :hasBack='true'></headerbox>

    <div class="p10 bgWhite">
      <p class="mb10 lightColor">充值金额</p>
      <ul class="moneyList mb20">
        <li v-for="(money,index) in moneyArr" :key="money.key"
        :class="{active:idx==index}"
        @click="setActive(index)">
          {{money}}元
          <em></em>
        </li>
      </ul>

      <p class="mb10 lightColor">支付方式</p>
      <ul class="payType">
        <li v-for="(payType,index) in payTypeArr" :key="payType.key"
        @click="choosePaytype(index)">
          <span>
            <img :src="payType.typeIcon" alt="">
             {{payType.typeName}}
          </span>
          <img src="@/assets/myWallet/selected_icon.png" alt="" v-if="payType.isPay==1"><!-- 选中 -->
          <img src="@/assets/myWallet/unselected_icon.png" alt="" v-else>
        </li>
      </ul>

      <div class="p10">
        <button type="button" name="button" class="blockButton" @click="reChargeEvent">去充值</button>
      </div>
    </div>
  </div>
</template>
<script>
import {userAccountRecharge} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    moneyArr:[500,100,50,10,1,0.1],
    idx:0,
    payTypeArr:[{
      typeName:'支付宝支付',
      typeIcon:require('@/assets/myWallet/alipay_icon.png'),
      isPay:1,
    },{
      typeName:'微信支付',
      typeIcon:require('@/assets/myWallet/wechat_icon.png'),
      isPay:0,
    }],
    reChargeJson:{
      token:'',
      amount:0,
    }
  }),
  components: {
  },
  methods: {
    setActive(index) {
      this.idx = index;
      this.reChargeJson.amount = this.moneyArr[index];    //选中充值金额
    },
    choosePaytype(index) {      //选中充值方式
      this.payTypeArr.forEach(item=>item.isPay=0);
      this.payTypeArr[index].isPay = 1;
    },
    // 充值
    reChargeEvent() {
      let self = this;
      let reChargeParam = self.reChargeJson;
      userAccountRecharge(reChargeParam).then(res=>{
        console.log(res);
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'))
    this.reChargeJson.token = xlyd_loginInfo.token;
    this.reChargeJson.amount = this.moneyArr[0];    //选中充值金额
  }
}
</script>
<style lang="scss" scoped>
.lightColor{
  color: $lightColor;
}
.moneyList{
  @include flex;
  flex-wrap: wrap;
  li{
    width: 48%;
    margin-right: 2%;
    border: 1px solid $boxBgcolor;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 10px;
    &:nth-child(2n){
      margin-right: 0;
    }
    &.active{
      background-image: url('../../../../assets/myWallet/rectangle_selected.png');
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
.payType{
  margin-bottom: 50px;
  li{
    @include flex;
    justify-content: space-between;
    border-bottom: 1px solid $boxBgcolor;
    height: 50px;
    img{
      width: 20px;
    }
  }
}
</style>
